<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			{{username}}--{{password}}--{{sex}}--{{hobby}}--{{city}}--{{bornDate}}
			<hr />
			<form>
				用户名: <input type="text" v-model="username" /> <br />
				密码: <input type="password" v-model="password" /> <br />
				性别: 
				<input type="radio" v-model="sex"  value="男" /> 男
				<input type="radio" v-model="sex" value="女" /> 女
				<br />
				爱好:
				<input type="checkbox" v-model="hobby" value="照相" />照相
				<input type="checkbox" v-model="hobby" value="爬山" />爬山
				<input type="checkbox" v-model="hobby" value="旅游" />旅游
				<input type="checkbox" v-model="hobby" value="动漫" />动漫
				<br />
				<select v-model="city">
					<option value="0">--请选择--</option>
					<option value="sz">深圳</option>
					<option value="sh">上海</option>
					<option value="gz">广州</option>
				</select>
				<br />
				出生日期
				<input type="date" v-model="bornDate" />
			</form>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					username:"",
					password:"",
					sex:"男",
					hobby:["动漫"],
					city:"0",
					bornDate:"2023-01-01"
				}
			})
		</script>
	</body>

</html>